<template>
    <div class="loading" :style="Style">
        <spinner type="crescent" ></spinner>
    </div>
</template>
<script>
import { Spinner } from "vux";
import { setTimeout } from 'timers';
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data(){
   return{
       Style:{
           display:"none",
           opacity:1
       }
   }
  },
  components: {
    Spinner
  },
  computed:{

  },
  watch: {
    isShow:function(nVal,oVal){
        let _this=this;
       if(!nVal){
           this.Style.opacity=0; 
         setTimeout(function(){
             _this.Style.display="none"
         },500)
       }else{
            this.Style.display="flex"
            this.Style.opacity=1; 
       }
    }
  }
};
</script>
<style lang="scss" scoped>
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  z-index: 100;
  transition: opacity 0.5s linear,display 0.5s linear;
  .vux-spinner{
          stroke: #da6857 !important;
  }
}
</style>
